<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详解折线图</title>
<!--    Echarts结构：引入echarts，准备DOM容器、初始化Echarts对象、指定配置项以及数据、图表对象设置数据-->
    <script src="js/echarts.js"></script>
    <style>
        .container{
            width: 800px;
            height: 800px;
            background: #cbe0db;
        }
    </style>
</head>
<body>
<div class="container"></div>
<!-- 需求：核算张三丰同学每个月开销-->
<script>
    //1.实例化图表对象---抓取页面DOM容器
    var myEcharts=
    echarts.init(document.getElementsByClassName("container")[0])
    //2.设置配置项和数据     X轴(类别：月份)   Y轴(值：数值)     直角坐标系
    var xDataArr=
["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
    var yDataArr=[1255,2556,5161,2649,1254,4425,3546,4545,4565,1666,5445,1214]
    //需求5：两条数据在一个折线图显示
    //增加王治国同学数据
     var zDataArr=
         [2255,3556,4161,1649,2254,3425,5546,4645,3565,2666,3445,4214]
    //var yDataArr=[1211,1212,1213,1212,1213,1212,1213,1215,1214,1212,1213,1214]
    var option={
        //xAxis ---X轴---类别：月份
        xAxis: {
           type: "category"     //category  类别
           ,data: xDataArr
            //紧贴Y轴--数据(数据对比明显)
            ,boundaryGap: false
        }  //yAxis ---Y轴----数值
        ,yAxis: {
           type: "value"      //Y轴中 设置value值，需要在series设置数据
           ,scale:true       //脱离0值比例---不明白--->看
        }
        ,series:[{  //图表  系列
            name: "张三丰每月开销"    //传参 类似于 input name="password"
            ,data: yDataArr      //Y轴数据需要指定在 系列中 series
            ,type: "line"      //类型需要指定为line--代表折线图
            // 在图表系列中 过滤数据,series设置
            // 需求1：知道张三丰同学最高以及最低消费数据(实现在图表上标注-最大、小数据)
            ,markPoint:{
            data: [
                {
                    type:"min"
                    ,name: "最小值"
                },{
                    type:"max"
                    ,name:"最大值"
                }
                 ]
                       }
             // 需求2：知道张三丰同学12个月的平均消费金额
            ,markLine:{  //在图表系列中 过滤数据,series设置
                data: [{
                    name:"平均值"
                    ,type:"average"  //平均值
                }]
            }
            // 需求3:2月至5月  6月至7月  9月到11月 区间数据
            ,markArea:{  //区间阴影块效果
                data:[
                    [{
                        xAxis: "2月"
                        },{
                        xAxis: "5月"
                    }],[{
                        xAxis: "6月"
                    },{
                        xAxis: "7月"
                    }],[{
                       xAxis: "9月"
                    },{
                       xAxis: "11月"
                    }]
                     ]     //二维数组
            }
            // 需求4: 美化线条效果：直线图变成曲线图,两者其一改变效果
            ,smooth:true     //曲线图效果
            ,lineStyle:{    //lineStyle线条添加：颜色、效果
                color: "#e4393c"   //京东红
                ,type: "dashed"
                //默认<实线>solid效果、dotted<点线>效果、dashed<虚线>效果
                //CSS边框 border:1px solid red
            }
            //需求3-1：折线面积图效果:  areaStyle
            ,areaStyle:{
                color:"#49c422"
            },stack:"all"
        },{
            name:"王治国每个开销"
            ,type:"line"
            ,data: zDataArr
            ,lineStyle: {
                color: "#0033ff"
            },stack:"all"
        }]

    }
    //3.图表设置数据
    myEcharts.setOption(option)
</script>
</body>
</html>